<template>
  <card-layout title="修复工程" bg="3" class="chart">
    <template #extra>
      <el-icon class="extra-more" :size="22" @click="onClose">
        <Close />
      </el-icon>
    </template>
    <div class="restoration-project">
      <div class="stats-content">
        <!-- 修复工程完成率环形图 -->
        <div class="completion-rate-chart">
          <div class="chart-container">
            <div style="width: 100%; height: 100%" ref="pieChartRef"></div>
            <div class="chart-label">
              <div class="percent">96%</div>
              <div class="txt">完成率</div>
            </div>
          </div>

          <div class="stats-info">
            <div class="total-info">
              <div class="info-item">
                <div class="info-label">计划修复</div>
                <div class="info-value">2.95<span class="unit">公顷</span></div>
              </div>
              <div class="info-item">
                <div class="info-label">累计修复</div>
                <div class="info-value">2.85<span class="unit">公顷</span></div>
              </div>
              <div class="info-item grey">
                <div class="info-label">新增损毁面积</div>
                <div class="info-value">2.31<span class="unit">公顷</span></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 方案编制状态 -->
        <div class="plan-status">
          <div class="status-row">
            <div class="status-item">
              <span class="status-label">方案编制状态</span>
              <span class="status-badge active">正常</span>
            </div>
            <div class="status-item">
              <span class="status-label">方案有效期</span>
              <span class="status-value">2023/03-2028/03</span>
            </div>
          </div>
          <div class="status-row">
            <div class="status-item">
              <span class="status-label">计划投资金额</span>
              <span class="status-value">36.70万元</span>
            </div>
            <div class="status-item">
              <span class="status-label">累计投资金额</span>
              <span class="status-value">36.70万元</span>
            </div>
          </div>
          <div class="status-row">
            <div class="status-item">
              <span class="status-label">计划投资金额</span>
              <span class="status-value">26.7万元</span>
            </div>
            <div class="status-item">
              <span class="status-label">累计投资金额</span>
              <span class="status-value">28.82万元</span>
            </div>
          </div>
        </div>

        <!-- 地质环境治理系统情况 -->
        <div class="treatment-system">
          <div class="system-title">地质环境治理系统情况</div>
          <div class="system-stats">
            <div class="stat-row">
              <div class="stat-item">
                <span class="stat-label">计划建立监测点</span>
                <span class="stat-value">2个</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">实际建立监测点</span>
                <span class="stat-value">2个</span>
              </div>
            </div>
            <div class="stat-row">
              <div class="stat-item">
                <span class="stat-label">计划使用资金</span>
                <span class="stat-value">2.7万元</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">实际使用资金</span>
                <span class="stat-value">2.70万元</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 修复工程方案资料 -->
        <div class="project-documents">
          <div class="documents-title">修复工程方案资料</div>
          <div class="documents-grid">
            <div class="doc-item">
              <div class="doc-icon">PDF</div>
              <div class="doc-name">生态修复工程</div>
            </div>
            <div class="doc-item">
              <div class="doc-icon">PDF</div>
              <div class="doc-name">评审意见文件</div>
            </div>
            <div class="doc-item">
              <div class="doc-icon">DWG</div>
              <div class="doc-name">地质环境治理设计图</div>
            </div>
            <div class="doc-item">
              <div class="doc-icon">DWG</div>
              <div class="doc-name">土地利用现状图</div>
            </div>
          </div>
        </div>

        <!-- 治理/监测年度 -->
        <div class="annual-monitoring">
          <div class="monitoring-title">治理/监测年度</div>
          <div class="monitoring-grid">
            <div class="monitor-item">
              <div class="monitor-icon">PDF</div>
              <div class="monitor-name">治理工程年度报告</div>
            </div>
            <div class="monitor-item">
              <div class="monitor-icon">PDF</div>
              <div class="monitor-name">环境监测年度报告</div>
            </div>
            <div class="monitor-item">
              <div class="monitor-icon">DWG</div>
              <div class="monitor-name">2024年修复报告</div>
            </div>
          </div>
        </div>

        <!-- 年度修复情况清单表 -->
        <div class="annual-table">
          <div class="table-title">年度修复情况清单表</div>
          <div class="table-container">
            <table class="restoration-table">
              <thead>
                <tr>
                  <th>日期</th>
                  <th>计划治理面积(公顷)</th>
                  <th>计划治理面积(万元)</th>
                  <th>计划投资金额(万元)</th>
                  <th>累计治理面积(公顷)</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>2024/01</td>
                  <td>采取措施改善</td>
                  <td>0.335</td>
                  <td>10.23</td>
                  <td>0.335</td>
                </tr>
                <tr>
                  <td>2024/02</td>
                  <td>采取措施改善</td>
                  <td>0.657</td>
                  <td>15.32</td>
                  <td>0.657</td>
                </tr>
                <tr>
                  <td>2024/03</td>
                  <td>采取措施改善</td>
                  <td>0.741</td>
                  <td>17.84</td>
                  <td>0.741</td>
                </tr>
                <tr>
                  <td>2024/04</td>
                  <td>采取措施改善</td>
                  <td>0.879</td>
                  <td>19.74</td>
                  <td>0.879</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </card-layout>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Close } from "@element-plus/icons-vue";
import * as echarts from "echarts";
import useChart from "@/hooks/useCharts.js";

const emits = defineEmits(["close"]);
const pieChartRef = ref(null);
let pieChart = useChart(pieChartRef).chartInstance;

// 初始化环形图
const initPieChart = () => {
  const option = {
    tooltip: {
      show: false,
    },
    legend: {
      show: false,
    },
    series: [
      {
        name: "修复进度",
        type: "pie",
        radius: ["68%", "92%"],
        avoidLabelOverlap: false,
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 96,
            name: "已完成",
            itemStyle: {
              color: "#00d4aa",
              borderRadius: "8px",
            },
          },
          {
            value: 4,
            name: "未完成",
            itemStyle: {
              color: "#9e9e9e9e",
              borderRadius: "8px",
            },
          },
        ],
      },
    ],
  };
  pieChart.value.setOption(option);
};

onMounted(() => {
  initPieChart();
});

const onClose = () => {
  emits("close");
};
</script>

<style lang="scss" scoped>
.chart {
  height: 100%;
}

.restoration-project {
  background-color: transparent;
  color: #333;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 12px;

  .stats-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    overflow-y: auto;

    .completion-rate-chart {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0px 12px;

      .chart-container {
        width: 150px;
        height: 150px;
        position: relative;

        .chart-label {
          user-select: none;
          position: absolute;
          pointer-events: none;
          top: 0px;
          left: 0px;
          z-index: 1;
          height: 100%;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .percent {
            font-size: 24px;
            color: #fff;
            font-weight: bold;
          }

          .txt {
            color: #dedede;
            font-size: 12px;
          }
        }
      }

      .stats-info {
        flex: 1;
        padding-left: 20px;

        .total-info {
          display: flex;
          flex-direction: column;
          gap: 12px;

          .info-item {
            display: flex;
            align-items: center;
            
            .info-label {
              font-size: 14px;
              color: #dedede;
              min-width: 80px;
            }

            .info-value {
              font-size: 16px;
              font-weight: 500;
              color: #00d4aa;
              margin-left: 12px;
              
              .unit {
                font-size: 12px;
                margin-left: 2px;
              }
            }

            &::before {
              content: "";
              display: inline-block;
              background-color: #00d4aa;
              height: 12px;
              width: 16px;
              border-radius: 2px;
              vertical-align: middle;
              margin-right: 8px;
            }

            &.grey {
              .info-value {
                color: #9e9e9e;
              }
              
              &::before {
                background-color: #9e9e9e;
              }
            }
          }
        }
      }
    }

    .plan-status {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      padding: 16px;
      
      .status-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .status-item {
          display: flex;
          align-items: center;
          gap: 8px;
          
          .status-label {
            font-size: 12px;
            color: #dedede;
          }
          
          .status-value {
            font-size: 12px;
            color: #fff;
          }
          
          .status-badge {
            background: #00d4aa;
            color: #fff;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 10px;
          }
        }
      }
    }

    .treatment-system {
      .system-title {
        font-size: 14px;
        color: #fff;
        font-weight: 300;
        margin-bottom: 12px;
      }
      
      .system-stats {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        padding: 12px;
        
        .stat-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .stat-item {
            display: flex;
            align-items: center;
            gap: 8px;
            
            .stat-label {
              font-size: 12px;
              color: #dedede;
            }
            
            .stat-value {
              font-size: 12px;
              color: #00d4aa;
              font-weight: 500;
            }
          }
        }
      }
    }

    .project-documents, .annual-monitoring {
      .documents-title, .monitoring-title {
        font-size: 14px;
        color: #fff;
        font-weight: 300;
        margin-bottom: 12px;
      }
      
      .documents-grid, .monitoring-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        
        .doc-item, .monitor-item {
          display: flex;
          align-items: center;
          gap: 8px;
          background: rgba(255, 255, 255, 0.05);
          padding: 8px;
          border-radius: 6px;
          cursor: pointer;
          transition: background 0.2s;
          
          &:hover {
            background: rgba(255, 255, 255, 0.1);
          }
          
          .doc-icon, .monitor-icon {
            background: #00d4aa;
            color: #fff;
            padding: 4px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: bold;
            min-width: 28px;
            text-align: center;
          }
          
          .doc-name, .monitor-name {
            font-size: 11px;
            color: #dedede;
            flex: 1;
          }
        }
      }
    }

    .annual-table {
      .table-title {
        font-size: 14px;
        color: #fff;
        font-weight: 300;
        margin-bottom: 12px;
      }
      
      .table-container {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        overflow: hidden;
        
        .restoration-table {
          width: 100%;
          border-collapse: collapse;
          
          th {
            background: rgba(0, 212, 170, 0.2);
            color: #fff;
            padding: 8px 6px;
            font-size: 11px;
            font-weight: 500;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          }
          
          td {
            padding: 6px;
            font-size: 10px;
            color: #dedede;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
          }
          
          tbody tr:hover {
            background: rgba(255, 255, 255, 0.05);
          }
        }
      }
    }
  }
}
</style>
